<template>
	<view class="list">
		<view class="list-item" v-for="(item, index) in reFriList" :key="index">
			<image :src="item.Avatar" style="width: 60px; height: 60px"></image>
			<text>&nbsp;</text>
			<text class="list-text">{{ item.Nickname }}</text>
			<button class="but" @click="strangerAdd(item)">添加</button><button class="but" @click="frienddetail(item.Id)">资料</button>
			<text>&nbsp;</text>
			<text>&nbsp;</text>
			<text>&nbsp;</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reFriList:[]
			}
		},
		onLoad() {
			this.friendlist();
		},
		methods: {
			friendlist(){
				let that = this
				const jsloguser = uni.getStorageSync('jsloguser');		
				if(jsloguser){
					let jsluser = JSON.parse(jsloguser)
					uni.request({
					    url: that.$host+'/apiv/v1/friend/stranger', // 你的API接口地址
					    method: 'POST',
						header:{'content-type':'application/x-www-form-urlencoded;charset=utf-8','Token':jsluser.token},
					    data: {fid:jsluser.id},
					    success: (res) => {
							if(res.data.code == 200){
								this.reFriList = res.data.data
							}else{
								alert(res.data.msg)
							}
					    },
					    fail: (err) => {
							alert(err)
					    }
					});
				}
			},
			strangerAdd(i){
				console.log(i.Id)
				let that = this
				const jsloguser = uni.getStorageSync('jsloguser');		
				if(jsloguser){
					let jsluser = JSON.parse(jsloguser)
					uni.request({
					    url: that.$host+'/apiv/v1/friend/stranger_add', // 你的API接口地址
					    method: 'POST',
						header:{'content-type':'application/x-www-form-urlencoded;charset=utf-8','Token':jsluser.token},
					    data: {stranger_id:i.Id},
					    success: (res) => {
							if(res.data.code == 200){
								alert(res.data.data)
							}else{
								alert('失败')
							}
					    },
					    fail: (err) => {
							alert(err)
					    }
					});
				}
			},
			frienddetail(friend_id){
				uni.navigateTo({
				    url: '/pages/chat/frienddetail?friend_id=' + friend_id+"&is_friend=0"
				});
			}
		}
	}
</script>

<style>
.list {
  display: flex;
  flex-direction: column;
  background-color: gainsboro;
  padding-left: 3%;
  padding-top: 3%;
}
 
.list-item {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 列表项之间的间隔 */
}
 
.list-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px; /* 图片和文字之间的间隔 */
}
 
.list-text {
  flex: 1;
}
.but{
	width: 18%;
	height: 1.6%;
}
</style>
